<script setup>
import { inject, ref } from "vue";
// import stepsview from "../components/steps/steps.vue";
import { useCounterStore } from "@/stores/upgrade";
import { handleGoBack } from "@/utils/router";
import { upgradecreate, upgradeagreeInfo } from "@/services/upfrade";
import { uploadfile } from "@/services/upload";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { base_URL } from "@/utils/http";
import { refunddetail, refundexpress, refunddelivery } from "@/services/order";
import { object } from "uview-plus/libs/function/test";

const fromdate = ref({
  refund_id: "",
  delivery_id: "",
  delivery_type: "",
  delivery_phone: "",
});

const show = ref(false);
const columns = ref([[]]);

onLoad((e) => {
  if (e.refund_id) {
    getdet(e.refund_id);
  }
});
const detobj = ref({});

async function getdet(id) {
  let res = await refunddetail({ refund_id: id });
  detobj.value = res.data;
}

const jcfun = (id) => {
  uni.navigateTo({
    url: "/pages/order/returndet/index?refund_id=" + id,
  });
};

const shoppayfun = async (id) => {
  //     delivery_id: "",
  //   delivery_type: "",
  //   delivery_phone: "",
  if (!fromdate.value.delivery_id) {
    uni.showToast({
      title: "请填写订单号",
      icon: "none",
    });
    return;
  }
  if (!fromdate.value.delivery_type) {
    uni.showToast({
      title: "请选择快递公司",
      icon: "none",
    });
    return;
  }
  if (!fromdate.value.delivery_phone) {
    uni.showToast({
      title: "请填写手机号",
      icon: "none",
    });
    return;
  }
  const phoneRegex = /^1\d{10}$/;
  if (!phoneRegex.test(fromdate.value.delivery_phone)) {
    uni.showToast({
      title: "手机号格式错误",
      icon: "none",
    });
    return;
  }
  fromdate.value.refund_id = id;

  try {
    let res = await refunddelivery(fromdate.value);
    if (res.code == 200) {
      uni.showToast({
        title: "提交成功",
        icon: "none",
      });
      setTimeout(() => {
        uni.redirectTo({
          url: "/pages/order/orderlist/index?status=4",
        });
      }, 1000);
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

const selectfun = async () => {
  if (columns.value[0].length <= 0) {
    try {
      var res = await refundexpress();
      if (res.code == 200) {
        columns.value[0] = res.data;
      }
    } catch (e) {
      uni.showToast({
        title: e.info,
        icon: "none",
      });
    }
  }

  show.value = true;
};

const closefun = () => {
  show.value = false;
};
const confirmfun = (e) => {
  fromdate.value.delivery_type = e.value[0].name;
  show.value = false;
};
</script>

<template>
  <view class="content">
    <view class="content-top">
      <view class="content-top-title">售后申请已提交</view>
      <view class="content-top-dec">请在<text>两天内</text>提交快递单号</view>
    </view>
    <view class="list">
      <view class="list-item">
        <!-- <view class="list-item-title">
          <text>订单编号：49832483231</text>
          <text class="list-item-title">待支付</text>
        </view> -->
        <view class="list-item-content">
          <view
            class="list-item-content-item"
            v-for="(item, index) in detobj.refundProduct"
            :key="index"
          >
            <view class="list-item-content-img">
              <image
                :src="
                  item.order_product_info ? item.order_product_info.image : ''
                "
                mode="widthFix"
              ></image>
            </view>
            <view class="list-item-content-info">
              <view class="list-item-content-info-title">
                <view class="good-name">
                  <text>{{
                    item.order_product_info
                      ? item.order_product_info.store_name
                      : ""
                  }}</text>
                </view>
                <view>
                  <text class="good-name-mr">默认</text>
                </view>
              </view>
              <view class="list-item-price">
                <view
                  >¥{{
                    item.order_product_info ? item.order_product_info.price : 1
                  }}</view
                >
                <view class="good-name-num"
                  >x {{ item.refund_num ? item.refund_num : 0 }}</view
                >
                <view
                  ><text class="good-name-text-index">{{
                    item.status_text
                  }}</text>
                </view>
              </view>
              <view
                v-if="detobj.status == 2"
                class="list-item-btn-item-left-btn"
                @click="jcfun(detobj.refund_id)"
                >寄快递</view
              >
            </view>
          </view>
        </view>

        <!-- <view class="list-nums">
          <text>共1件, </text>
          <text>总计：</text><text class="list-nums-s">¥2000</text>
        </view>
        <view class="list-item-btn">
          <view class="list-item-btn-item-left">取消订单</view>
          <view class="list-item-btn-item-right">立即支付</view>
        </view> -->
      </view>
    </view>
  </view>

  <u--form>
    <view class="user-form">
      <!-- <u-form-item label="退款金额" prop="phone" borderBottom ref="item1">
        <view class="select">¥2000</view>
      </u-form-item> -->
      <u-form-item
        required="true"
        label="物流单号"
        prop="delivery_id"
        borderBottom
        ref="item1"
      >
        <u--input
          v-model="fromdate.delivery_id"
          border="none"
          placeholder="请填写物流单号"
        ></u--input>
      </u-form-item>
      <u-form-item
        required="true"
        label="物流公司"
        prop="delivery_type"
        borderBottom
        ref="item1"
      >
        <view
          class="select"
          @click="selectfun"
          :class="fromdate.delivery_type ? 'selectdata-color' : ''"
          >{{ fromdate.delivery_type ? fromdate.delivery_type : "请选择" }}
        </view>
      </u-form-item>

      <view class="item-line">
        <u-form-item
          required="true"
          label="联系电话"
          prop="delivery_phone"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="fromdate.delivery_phone"
            border="none"
            placeholder="请填写"
          ></u--input>
        </u-form-item>
      </view>
    </view>
  </u--form>

  <view class="content-footer">
    <view class="contebt-pays">
      <!-- <view>
        <text>共1件</text>
        <text class="pay-hj">合计:</text>
        <text class="pay-bq">¥</text>
        <text class="pay-num">{{ num }}</text>
      </view> -->
      <!-- <up-button class="pay-bt-xs" text="支付"></up-button> -->
      <view @click="shoppayfun(detobj.refund_id)" class="pay-bt pay-df"
        >提交</view
      >
    </view>
  </view>
  <up-picker
    :show="show"
    keyName="name"
    @cancel="closefun"
    @close="closefun"
    :columns="columns"
    @confirm="confirmfun"
  ></up-picker>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
